<template>
    <div class="goodList">
      <transition>
        <component :is="$store.state.showPage" @getCartsNum="getCartsNum"></component>
      </transition>
    </div>
</template>

<script>
export default {
  name: 'goodList',
  components: {
    HomeList: () => import('./home/homeList'),
    MoreSec: () => import('./home/moreSec'),
    coupon: () => import('./home/couponcenter'),
    ProductDetails: () => import('@/components/goodList/productdetails/productdetails'),
    ShoppingCart: () => import('./home/shoppingcart'),
    SellWell: () => import('./home/sellwell'),
    shop: () => import('@/components/shop'),
    SearchList: () => import('@/components/goodList/searchList'),
    ConfirmOrder: () => import('@/components/confirmOrder')
  },
  props: ['itemId'],
  data () {
    return {
      sliders: null,
      hotRecommendList: null,
      newProduct: null,
      seconds: null
    }
  },
  methods: {
    getCartsNum () {
      this.$emit('getcartsNumber')
    }
  }
}
</script>

<style scoped lang="scss">
  .v-enter{
    transform: translateX(-100px);
    opacity: 0;
  }
  .v-leave-to{
    transform: translateX(100px);
    opacity: 0;
    position: absolute;
  }
  .v-enter-active,
  .v-leave-active{
    transition: all 0.7s ease;
  }
/*.goodList {*/
/*  !*background-color: #ffd380;*!*/
/*  .couponCenter {*/
/*    max-width: 1275px;*/
/*    min-width: 780px;*/
/*    margin: 0 auto;*/
/*    img {*/
/*      margin-top: 50px;*/
/*      width: 100%;*/
/*      max-height: 150px;*/
/*    }*/
/*  }*/
/*  .newProduct {*/
/*    background-color: #f8f8f8;*/
/*    width: 100%;*/
/*  }*/
/*}*/
</style>
